Data visualization and analysis at the University of Washington, Seattle.
printTable(await fetch(antibiotics).then(res => res.json())) // JavaScript Fetch API
vl.markCircle().data(antibiotics).encode(
vl.x().fieldQ('Neomycin')
).render()
vl.markCircle().data(antibiotics).encode(
vl.x().fieldQ('Neomycin')
.scale({type: 'sqrt'})
).render()
vl.markCircle().data(antibiotics).encode(
vl.x().fieldQ('Neomycin')
.scale({type: 'log'})
).render()
vl.markCircle().data(antibiotics).encode(
vl.x().fieldQ('Neomycin')
.scale({type: 'log'}).sort('descending')
).render()
vl.markCircle().data(antibiotics).encode(
vl.x().fieldQ('Neomycin')
.scale({type: 'log'}).sort('descending')
.title('Neomycin MIC (μg/ml, reverse log scale)')
).render()
vl.markCircle().data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log'})
.axis({orient: 'top'})
.title('Neomycin MIC (μg/ml, reverse log scale)')
).render()
vl.markCircle().data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log'})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Streptomycin').sort('descending')
.scale({type: 'log'})
.title('Streptomycin MIC (μg/ml, reverse log scale)')
).render()
vl.markCircle().data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log'})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log'})
.title('Penicillin MIC (μg/ml, reverse log scale)')
).render()
vl.markCircle().data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.title('Penicillin MIC (μg/ml, reverse log scale)')
).width(250).height(250).render()
vl.markCircle().data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Penicillin MIC (μg/ml, reverse log scale)')
).width(250).height(250).render()
vl.markCircle({size: 80}).data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Penicillin MIC (μg/ml, reverse log scale)')
).width(250).height(250).render()
vl.markCircle({size: 80}).data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Penicillin MIC (μg/ml, reverse log scale)'),
vl.color().fieldN('Gram_Staining')
).width(250).height(250).render()
vl.markCircle({size: 80}).data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Penicillin MIC (μg/ml, reverse log scale)'),
vl.color().fieldN('Gram_Staining')
.scale({domain: ['negative', 'positive'], range: ['hotpink', 'purple']})
).width(250).height(250).render()
vl.markCircle({size: 80}).data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Penicillin MIC (μg/ml, reverse log scale)'),
vl.color().fieldN('Gram_Staining')
.scale({domain: ['negative', 'positive'], range: ['hotpink', 'purple']})
.legend({orient: 'left'})
).width(250).height(250).render()
vl.markCircle({size: 80}).data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Penicillin MIC (μg/ml, reverse log scale)'),
vl.color().fieldN('Gram_Staining')
.scale({domain: ['negative', 'positive'], range: ['hotpink', 'purple']})
.legend(null)
).width(250).height(250).render()
vl.markCircle({size: 80}).data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Penicillin MIC (μg/ml, reverse log scale)'),
vl.color().fieldN('Bacteria')
).width(250).height(250).render()
vl.markCircle({size: 80}).data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Penicillin MIC (μg/ml, reverse log scale)'),
vl.color().fieldN('Bacteria')
.scale({scheme: 'tableau20'})
).width(250).height(250).render()
vl.markCircle({size: 80}).data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Penicillin MIC (μg/ml, reverse log scale)'),
vl.color().fieldO('Bacteria')
).width(250).height(250).render()
vl.markCircle({size: 80}).data(antibiotics).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Penicillin MIC (μg/ml, reverse log scale)'),
vl.color().fieldO('Bacteria')
.scale({scheme: 'viridis'})
).width(250).height(250).render()
vl.markCircle({size: 80}).data(antibiotics).transform(
vl.calculate('split(datum.Bacteria, " ")[0]').as('Genus')
).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Penicillin MIC (μg/ml, reverse log scale)'),
vl.color().fieldO('Genus')
.scale({scheme: 'tableau20'})
).width(250).height(250).render()
vl.markCircle({size: 80}).data(antibiotics).transform(
vl.calculate('split(datum.Bacteria, " ")[0]').as('Split'),
vl.calculate('indexof(["Salmonella", "Staphylococcus", "Streptococcus"], datum.Split) >= 0 ? datum.Split : "Other"').as('Genus')
).encode(
vl.x().fieldQ('Neomycin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Neomycin MIC (μg/ml, reverse log scale)'),
vl.y().fieldQ('Penicillin').sort('descending')
.scale({type: 'log', domain: [0.001, 1000]})
.axis({tickCount: 5})
.title('Penicillin MIC (μg/ml, reverse log scale)'),
vl.color().fieldO('Genus').scale({
domain: ['Salmonella', 'Staphylococcus', 'Streptococcus', 'Other'],
range: ['rgb(76,120,168)', 'rgb(84,162,75)', 'rgb(228,87,86)', 'rgb(121,112,110)']
})
).width(250).height(250).render()
vl.markRect().data(antibiotics).encode(
vl.y().fieldN('Bacteria')
.sort(vl.max('Penicillin').order('descending')),
vl.color().fieldQ('Penicillin')
.scale({nice: true}) // align domain to human-friendly numbers
).render()
vl.markRect().data(antibiotics).encode(
vl.y().fieldN('Bacteria')
.sort(vl.max('Penicillin').order('descending'))
.axis({
orient: 'right', // orient axis on right side of chart
titleX: 7, // set x-position to 7 pixels right of chart
titleY: -2, // set y-position to 2 pixels above chart
titleAlign: 'left', // use left-aligned text
titleAngle: 0 // undo default title rotation
}),
vl.color().fieldQ('Penicillin')
.scale({type: 'log', scheme: 'plasma', nice: true})
.legend({titleOrient: 'right', tickCount: 5})
.title('Penicillin MIC (μg/ml)')
).render()
vl.markRect().data(antibiotics).encode(
vl.y().fieldN('Bacteria')
.sort(vl.max('Penicillin').order('descending'))
.axis({orient: 'right', title: null}),
vl.color().fieldQ('Penicillin')
.scale({type: 'log', scheme: 'plasma', nice: true})
.legend({titleOrient: 'right', tickCount: 5})
.title('Penicillin MIC (μg/ml)')
).title({
text: 'Penicillin Resistance of Bacterial Strains',
anchor: 'start', // anchor and left-align title
offset: 5 // set title offset from chart
}).render()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
